<template>
    <div>
        <web-header show="visa" />
        <div class="daohang_a">
            <router-link to="/">首页</router-link> &gt;
            <router-link to="/visa">签证中心</router-link>
        </div>
        <div class="main" id="app">
            <!-- 签证国家列表 -->
            <div class="main-left">
                <div class="left-nav">
                    <div class="nav-menu" style="background-color: #0db770;" id="nav-menu">
                        <ul>
                            <li class="off">签证国家</li>
                        </ul>
                    </div>
                    <div class="menu-div">
                        <div id="con_one_1">
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/PKDEcu.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">亚洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['亚洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>

                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/AEsBgM.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">欧洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['欧洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/kmnFUG.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">美洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['美洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/fRzmRP.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">澳洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['澳洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/gq7SWx.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">非洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['中东非']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>


            </div>

            <div class="main-right" id="box">
                <div class="screen">
                    <div class="top">
                        <ul id="typeArr">
                            <li><a href="javascript:void(0)" @click="changeList('type', '')"
                                    :class="data.type == '' ? 'active' : ''">全部</a>
                            </li>
                            <li v-for="rs in destination.type" :key="rs.id">
                                <a @click="changeList('type', rs.id)" :class="data.type == rs.id ? 'active' : ''"
                                    href="javascript:void(0)">{{
                                        rs.title }}</a>
                            </li>
                            <!-- <li><a href="javascript:void(0)" name="123">商务签证</a></li>
                <li><a href="javascript:void(0)" name="124">探亲访友签</a></li>
                <li><a href="javascript:void(0)" name="125">留学签证</a></li> -->
                        </ul>
                    </div>
                    <div class="bottom">
                        <dl>
                            <dt>所在地：</dt>
                            <dd id="areaArr">
                                <a @click="changeList('area', '')" :class="data.area == '' ? 'active' : ''"
                                    href="javascript:void(0)">全部
                                </a>
                                <a v-for="rs in destination.area" :key="rs.id" @click="changeList('area', rs.id)"
                                    :class="data.area == rs.id ? 'active' : ''" href="javascript:void(0)">{{ rs.title }}
                                </a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>入境次数：</dt>
                            <dd id="numsArr">
                                <a @click="changeList('nums', '')" :class="data.nums == '' ? 'active' : ''"
                                    href="javascript:void(0)">全部
                                </a>
                                <a v-for="rs in destination.nums" :key="rs.id" @click="changeList('nums', rs.id)"
                                    :class="data.nums == rs.id ? 'active' : ''" href="javascript:void(0)">{{ rs.title }}
                                </a>
                                <!-- <a href="javascript:void(0)" name="136">使馆定</a>
                  <a href="javascript:void(0)" name="133">单次</a>
                  <a href="javascript:void(0)" name="134">多次</a>
                  <a href="javascript:void(0)" name="142">两次</a> -->
                            </dd>
                        </dl>
                    </div>
                </div>

                <!-- 列表 -->
                <div class="list">
                    <div v-for="rs in list" :key="rs.id" class="list_item">
                        <div>
                            <div class="title">
                                <!-- <span style="background-color: #009af7" class="tip">旅游签</span> -->
                                <!-- <span style="background-color: #fa7e03" class="tip">商务签</span>
                    <span style="background-color: #0db770" class="tip">探亲签</span>
                    <span style="background-color: #cf01f8" class="tip">留学签</span> -->
                                <span v-for="(labers, index0) in rs.visa_type" :key="index0" class='tip'
                                    :style="{ backgroundColor: color(labers.title) }">
                                    {{ labers.title }}
                                </span>

                                <router-link :to="`/visa/details/${rs.id}`">{{ rs.title }}</router-link>

                            </div>
                            <div class="msgs">
                                <span>入境次数：{{ rs.visaPro.visa_nums }}</span>
                                <span>有效期：{{ rs.visaPro.expiry }}</span>
                                <span>办理时长：{{ rs.visaPro.days }}</span>
                            </div>
                        </div>
                        <div class="price">
                            <div class="price_num">￥{{ rs.price }}</div>
                            <div class="ToDetails">
                                <router-link :to="`/visa/details/${rs.id}`">查看详情</router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <web-footer />
        <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { visa_country, visa_items, visa_types, visa_nums, visa_areas, search_visa } from "@/api/travel";
import { useRoute } from "vue-router";

const route = useRoute();

// 当前路径
let fullPath = route.fullPath;

// 国家列表
let country = ref({ '亚洲': [], '欧洲': [], '中东非': [], '美洲': [], '澳洲': [] });


let getCountry = async () => {
    country.value["亚洲"] = (await visa_country(49)).data.reverse();
    country.value["欧洲"] = (await visa_country(2)).data.reverse();
    country.value["中东非"] = (await visa_country(51)).data.reverse();
    country.value["美洲"] = (await visa_country(7)).data.reverse();
    country.value["澳洲"] = (await visa_country(50)).data.reverse();
    // countryIndex.value = "亚洲";
}

let data = ref({});
let list = ref([]);

let destination = ref({}); // 所有信息


// 初始化 
const initialize = async () => {
    fullPath = route.fullPath; // 保存当前路径
    // 初始化数据
    data.value = {
        keyword: route.query.name,
        //   country: Number(route.params.country),
        type: route.query.type || '', // 签证类型
        nums: '', // 入境次数
        area: '', // 常驻地id
        page: 1,
        limit: 50,
    };
    list.value = [];

    console.log("url:", route.query)

    // 获取列表
    // let type = (await visa_types({ country: data.value.country, area: data.value.area })).data; // 签证类型
    let area = (await visa_areas({})).data; // 签证常驻地
    let nums = (await visa_nums({ country: data.value.country, area: data.value.area })).data; // 入境次数
    destination.value = {
        // type,
        area,
        nums,
    }
    console.log("destination", destination)

    // 初始化列表
    await anewList();
    let title = list.value[0].country.title;
    document.title = `${title}签证_${title}旅游签证_${title}商务签证 ${title}留学签证 旅行社签证官网`;


}




// 改变data.value时切换列表
const anewList = async () => {
    let res = await search_visa(data.value);
    list.value = [...res.data];
}

// data值改变
const changeList = (key, value) => {
    switch (key) {
        case 'type':
            data.value.type = value;
            break;
        case 'nums':
            data.value.nums = value;
            break;
        case 'area':
            data.value.area = value;
            break;
        default:
            break;
    }
    data.value.page = 1;
    anewList();
}

const color = (key) => {
    switch (key) {
        case '旅游签':
            return '#68a4e8';
        case '探亲访友签':
            return '#0db770';
        case '商务签':
            return '#fa7e03';
        case '留学签':
            return '#cf01f8';
        default:
    }
}


onMounted(async () => {
    await getCountry();
    await initialize();

})



</script>

<style lang="scss" scoped>
@import "../../css/main_visa_list3.css";
</style>